<script lang="ts" setup>
import './index.scss'
import { computed } from 'vue'
import { customTableProps, customTableEmits } from './type'
import { isFunction } from 'lodash-es'

const props = defineProps(customTableProps)
const emit = defineEmits(customTableEmits)

// console.log(props, 'props')
const data = computed(() => props.tableData)
const column = computed(() => props.columnData)

// 多选
const selectable = computed(() => props.selectableConfig)

// 分页
const pagination = computed(() => {
	return {
		pageSizes: [10, 30, 50, 100],
		layout: 'total, sizes, prev, pager, next, jumper',
		...props.paginationConfig,
	}
})
const paginationNo = computed(() => pagination.value?.total === undefined)

// 操作栏
const operate = computed(() => props.operate)

// 分页器
function handleSizeChange(value: number, type: string) {
	emit('onPagination', { type, value })
}

// 操作栏item展示控制
function showOperateItem(item: any, row: any) {
	if (!item.slot) {
		if (isFunction(item.showBtn)) {
			return item.showBtn(row)
		}
		return true
	}
	return false
}
</script>
<template>
	<div class="custom-table-com">
		<div :class="`table-container ${paginationNo ? 'pagination-no' : ''}`">
			<el-table :data="data" style="height: 100%" @selection-change="(arr: any[]) => emit('onSelectionChange', arr)">
				<!-- 多选 -->
				<el-table-column v-if="selectable" type="selection" :selectable="selectable.disabled" width="55" />

				<!-- 序号 -->
				<el-table-column v-if="props.showIndex" type="index" :index="(index: number) => index + 1" />

				<!-- 正常列数据 -->
				<el-table-column v-for="item of column" v-bind="item" :key="item.prop" show-overflow-tooltip>
					<template #header>
						<span v-if="!item.headerSlotName">{{ item.label }}</span>
						<slot v-else :name="item.headerSlotName" :row="item"></slot>
					</template>
					<template #default="{ row }">
						<span v-if="!item.contentType">{{ row[item.prop as any] }}</span>
						<slot v-else :name="item.prop" :row="{ ...row, propName: item.prop }"></slot>
					</template>
				</el-table-column>

				<!-- 操作栏 -->
				<el-table-column fixed="right" v-if="operate.length" label="操作" :width="props.operateWidth">
					<template #default="{ row }">
						<div class="operate-item">
							<template v-for="o in operate">
								<span
									@click="() => o?.onClick(row)"
									v-if="showOperateItem(o, row)"
									:style="{ color: o.color || '#666' }"
								>
									{{ o.text }}
								</span>
								<slot v-else :name="o.slot" :row="{ ...row, operateItem: o }"></slot>
							</template>
						</div>
					</template>
				</el-table-column>

				<!-- 暂无数据 -->
				<template #empty>
					<div>暂无数据</div>
				</template>
			</el-table>
		</div>
		<div class="pager-container" v-if="!paginationNo">
			<el-pagination
				background
				:size="'default'"
				:layout="pagination.layout"
				:page-sizes="pagination.pageSizes"
				:total="props.paginationConfig.total"
				v-model:page-size="props.paginationConfig.pageSize"
				v-model:current-page="props.paginationConfig.currentPage"
				@size-change="handleSizeChange($event, 'pageSize')"
				@current-change="handleSizeChange($event, 'currentPage')"
			/>
		</div>
	</div>
</template>
